import React, { Component } from 'react'
import { Form, Input, Toast } from 'antd-mobile'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import styles from '../styles/login.scss'
import { login } from '../apis/login.js'
import { withRouter } from 'react-router-dom'
class Login extends Component {
  formRef = React.createRef()
  state = {
    visible: false
  }
  setVisible(bool) {
    this.setState({
      visible: bool
    })
  }
  login = async () => {
    const { username, password } = this.formRef.current.getFieldsValue()
    let res = await login(username, password)
    switch (res.code) {
      case 200:
        Toast.show({
          icon: 'success',
          content: res.msg,
        })
        this.props.history.push('index')
        break;
      case 400:
        Toast.show({
          // icon: 'fail',
          content: res.msg,
        })
        break;

      default:
        break;
    }
  }
  reg = () => {
    this.props.history.push('/reg')
  }
  render() {
    return (
      <div className='login'>
        <p>欢迎登录</p>
        <Form layout='horizontal' ref={this.formRef}>
          <Form.Item label='用户名' name='username'>
            <Input placeholder='请输入用户名' clearable />
          </Form.Item>
          <Form.Item
            label='密码'
            name='password'
            extra={
              <div className={styles.eye}>
                {!this.state.visible ? (
                  <EyeInvisibleOutline onClick={() => this.setVisible(true)} />
                ) : (
                  <EyeOutline onClick={() => this.setVisible(false)} />
                )}
              </div>
            }
          >
            <Input
              placeholder='请输入密码'
              clearable
              type={this.state.visible ? 'text' : 'password'}
              autocomplete
            />
          </Form.Item>
        </Form>
        <div className='btn'>
          <button onClick={this.login}>登录</button>
          <button onClick={this.reg}>注册</button>
        </div>

      </div>
    )
  }
}
export default withRouter(Login)